﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>搜索展开菜单</title>
        <script src="../../../课件/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			 //has()匹配含有选择器所匹配的元素的元素
			 //is()根据选择器、元素或 jQuery 对象来检测匹配元素集合
			$(function() {
				$("li:has(ul)").css("list-style-image", "url(img/-.gif)").click(function(event) {//为包含ul元素的li定义点击事件
						if ($(this).children().is(":hidden")) {
							$(this).css("list-style-image", "url(img/-.gif)").children().slideDown()
						} else {
							$(this).css("list-style-image", "url(img/1.gif)").children().slideUp()
						}
				});
				$("li:not(:has(ul))").css("list-style","none")
			});
		</script>
	</head>
	<body>
		<ul>
			<li>主题市场
				<ul>
					<li>运动派</li>
					<li>有车族</li>
					<li>生活家</li>
				</ul>
			</li>
			<li>特色购物
				<ul>
					<li>淘宝二手</li>
					<li>拍卖会</li>
					<li>爱逛街</li>
					<li>全球购</li>
					<li>淘女郎</li>
				</ul>
			</li>
			<li>优惠促销
				<ul>
					<li>天天特价</li>
					<li>免费试用</li>
					<li>清仓</li>
					<li>1元起拍</li>
				</ul>
			</li>
			<li>工具</li>
		</ul>
	</body>

</html>